@import '../../asset/styles/util.less';

.content {
  box-sizing: border-box;
  padding: 20px 0 50px 0;
  border-top: 3px solid #ff8000;
  background-color: #f6f6f6;
  .box {
    box-sizing: border-box;
    width: 1200px;
    margin: 0 auto;
    .confirmOrderAddressBox {
      box-sizing: border-box;
      padding: 30px 20px;
      background-color: #fff;
      .addressTitle {
        margin-bottom: 5px;
        height: 14px;
        line-height: 1;
        font-size: 14px;
        color: #333;
      }
      .addressForm {
        margin-left: 180px;
        .defaultAddressBox {
          margin-bottom: 15px;
          .defaultAddress {
            margin-bottom: 15px;
          }
        }
        .createFormBox {
          position: relative;
          .formItem {
            margin-bottom: 10px;
            .formItemLabel {
              float: left;
              text-align: left;
              width: 60px;
              height: 30px;
              line-height: 30px;
              font-size: 12px;
              color: #333;
            }
            .formItemControl {
              float: left;
              input[type='text'],
              textarea {
                box-sizing: border-box;
                padding: 8px;
                border: 1px solid #e1e1e1;
                outline: none;
              }
              input[type='text'] {
                height: 30px;
              }
              textarea {
                resize: unset;
              }
              .receiver {
                width: 100px;
              }
              .area {
                width: 150px;
              }
              .fullAddress {
                width: 320px;
                height: 50px;
              }
              .mobile {
                width: 225px;
              }
              .start {
                width: 56px;
              }
              .center {
                width: 93px;
                margin: 0 10px;
              }
              .end {
                width: 56px;
              }
              .defaultCheckBox {
                box-sizing: border-box;
                height: 30px;
                padding: 9px 0;
                .checkbox {
                  float: left;
                  margin-right: 10px;
                }
                .text {
                  float: left;
                  display: inline-block;
                  height: 14px;
                  line-height: 14px;
                  font-size: 12px;
                  color: #333;
                }
              }
              .createAddressBtn {
                width: 120px;
                height: 28px;
                background-color: #ff6600;
                border: none;
                font-size: 12px;
                color: #fff;
                outline: none;
              }
            }
          }
          .unlessBox {
            position: absolute;
            left: 290px;
            bottom: 95px;
            height: 40px;
            .unlessLine {
              float: left;
              width: 3px;
              height: 40px;
              margin-right: 40px;
              border: 1px solid #e1e1e1;
              border-left: none;
            }
            .unlessText {
              float: left;
              height: 40px;
              line-height: 40px;
              font-size: 12px;
              color: #999;
            }
          }
        }
      }
    }
    .orderInfoTitle {
      box-sizing: border-box;
      height: 42px;
      padding: 14px 0;
      .line {
        float: left;
        width: 3px;
        height: 14px;
        margin-right: 5px;
        background-color: #ff5f00;
      }
      .text {
        float: left;
        display: inline-block;
        height: 14px;
        line-height: 14px;
        font-size: 14px;
        color: #333;
      }
    }
    .sellerListBox {
      .sellerItemBox {
        margin-bottom: 20px;
        background-color: #fff;
        .sellerTitle {
          box-sizing: border-box;
          padding: 14px;
          border-bottom: 1px solid #e1e1e1;
          font-size: 12px;
          color: #333;
        }
        .sellerDetailBox {
          box-sizing: border-box;
          padding: 30px;
          .rowBox {
            .detailBoxLabel {
              float: left;
              width: 100px;
              height: 40px;
              line-height: 40px;
              font-size: 12px;
              color: #999;
            }
            .detailBoxContent {
              float: left;
              width: 1040px;
              .orderListBox {
                background-color: #f9fbff;
                .orderItemHead {
                  box-sizing: border-box;
                  height: 40px;
                  padding: 0 10px;
                  border: 1px solid #e2edf8;
                  line-height: 38px;
                  font-size: 12px;
                  & > div {
                    float: left;
                  }
                }
                .orderItem {
                  box-sizing: border-box;
                  height: 81px;
                  padding: 10px;
                  border: 1px solid #e2edf8;
                  border-top: none;
                  & > div {
                    float: left;
                  }
                  .info {
                    .goodsImg {
                      box-sizing: border-box;
                      float: left;
                      width: 60px;
                      height: 60px;
                      margin-right: 10px;
                      border: 1px solid #e1e1e1;
                      img {
                        width: 100%;
                        height: 100%;
                        vertical-align: middle;
                      }
                    }
                    .goodsInfoText {
                      float: left;
                      width: 250px;
                      height: 100%;
                      margin-right: 40px;
                      a {
                        overflow: hidden;
                        display: block;
                        width: 100%;
                        max-height: 100%;
                        line-height: 20px;
                        color: #333;
                        &:hover {
                          color: #ff8000;
                          text-decoration: underline;
                        }
                      }
                    }
                  }
                  .unitPrice,
                  .count,
                  .subtotal {
                    color: #333;
                  }
                  .subtotal {
                    color: #f00;
                  }
                }
                .info {
                  width: 475px;
                }
                .unitPrice {
                  width: 200px;
                }
                .count {
                  width: 200px;
                }
                .subtotal {
                  width: 135px;
                }
              }
              .logisticsBox {
                .logisticsSelectBox {
                  margin-bottom: 20px;
                  .logisticsSelectItem {
                    cursor: pointer;
                    box-sizing: border-box;
                    position: relative;
                    width: 140px;
                    height: 40px;
                    float: left;
                    margin-right: 20px;
                    border: 1px solid #e1e1e1;
                    &:hover {
                      border-color: #ff8000;
                    }
                    &.active {
                      border-color: #ff8000;
                    }
                    .text,
                    .specialText {
                      width: 100%;
                      height: 100%;
                      text-align: center;
                      color: #333;
                    }
                    .specialText {
                      padding: 4px;
                      .money {
                        margin-top: 6px;
                        font-size: 10px;
                        color: #999;
                      }
                    }
                    .text {
                      line-height: 40px;
                    }
                    .icon {
                      position: absolute;
                      right: -1px;
                      bottom: -1px;
                      color: #ff8000;
                    }
                  }
                  .outOfRange {
                    height: 40px;
                    line-height: 40px;
                    color: #f00;
                  }
                }
                .logisticsForm {
                  .logisticsFormControl,
                  .logisticsFormLabel,
                  .other {
                    float: left;
                    height: 30px;
                    margin-right: 10px;
                    line-height: 30px;
                    color: #333;
                  }
                  .consultBox {
                    .logisticsFormInput {
                      width: 100px;
                      height: 100%;
                      padding: 5px;
                      border: 1px solid #e1e1e1;
                      outline: none;
                    }
                    .other {
                      color: #f00;
                    }
                  }
                  .selfLiftingBox {
                    .other {
                      cursor: pointer;
                      color: #1e88e5;
                      &:hover {
                        text-decoration: underline;
                      }
                    }
                  }
                }
              }
              .receiptBox {
                color: #333;
                .receiptSelectBox {
                  height: 40px;
                  .receiptSelectItem {
                    cursor: pointer;
                    float: left;
                    margin-right: 50px;
                    line-height: 40px;
                  }
                }
                .receiptForm {
                  margin: 5px 0 15px 0;
                  .receiptFormControl {
                    float: left;
                    .name,
                    .number,
                    .address {
                      overflow: hidden;
                      float: left;
                      margin-right: 30px;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                    }
                    .name {
                      max-width: 200px;
                    }
                    .number {
                      max-width: 250px;
                    }
                    .address {
                      max-width: 320px;
                    }
                  }
                  .other {
                    cursor: pointer;
                    float: left;
                    margin-left: 10px;
                    color: #1e88e5;
                    &:hover {
                      text-decoration: underline;
                    }
                  }
                }
                .unSupport {
                  height: 40px;
                  line-height: 40px;
                  color: #f00;
                }
              }
              .settlementBox {
                .remarkBox {
                  float: left;
                  textarea {
                    box-sizing: border-box;
                    display: block;
                    width: 500px;
                    height: 80px;
                    padding: 8px 10px;
                    margin-bottom: 5px;
                    border: 1px solid #e1e1e1;
                    line-height: 20px;
                    color: #333;
                    resize: unset;
                    outline: none;
                  }
                  .leftInputNumber {
                    text-align: right;
                    color: #999;
                  }
                }
                .bonusCountBox {
                  float: right;
                  .bonusRow {
                    margin-bottom: 15px;
                    color: #333;
                    .left,
                    .right {
                      height: 14px;
                      line-height: 14px;
                    }
                    .selectLeft,
                    .selectRight {
                      height: 25px;
                      line-height: 25px;
                    }
                    .left {
                      float: left;
                      width: 100px;
                      margin-right: 50px;
                      font-size: 12px;
                      .bonusSelect {
                        box-sizing: border-box;
                        cursor: pointer;
                        width: 95px;
                        height: 25px;
                        padding: 0 5px;
                        line-height: 25px;
                        border: 1px solid #e1e1e1;
                      }
                    }
                    .right {
                      float: right;
                      text-align: right;
                      font-size: 14px;
                      span {
                        color: #f00;
                      }
                    }
                  }
                }
              }
            }
          }
          .divider {
            margin: 10px 0 25px 0;
            border-bottom: 1px solid #e1e1e1;
          }
        }
      }
    }
    .bottomBox {
      height: 58px;
      .borderedBox {
        float: left;
        width: 1080px;
        height: 100%;
        background-color: #fff;
        font-size: 12px;
        color: #666;
        .leftHandleBox {
          box-sizing: border-box;
          float: left;
          height: 100%;
          padding: 20px;
          .handleText {
            cursor: pointer;
            float: left;
            height: 18px;
            line-height: 18px;
            font-size: 14px;
            &:hover {
              color: #ff8000;
              text-decoration: underline;
            }
          }
        }
        .rightHandleBox {
          box-sizing: border-box;
          float: right;
          height: 100%;
          padding: 17px 20px;
          font-size: 12px;
          .countText {
            float: left;
            height: 22px;
            margin-right: 30px;
            line-height: 22px;
          }
          .amountText {
            float: left;
            height: 20px;
            .text {
              display: inline-block;
              float: left;
              height: 22px;
              line-height: 22px;
            }
            .number {
              display: inline-block;
              float: left;
              height: 22px;
              line-height: 1;
              font-size: 22px;
              color: #f00;
            }
          }
        }
      }
      .settlementBtn {
        float: left;
        width: 120px;
        height: 100%;
        border: none;
        outline: none;
        background-color: #ff8000;
        font-size: 18px;
        color: #fff;
      }
    }
  }
}
